<template>
    <!-- 头部 -->
    <div class="sx-header-nav">
      <div class="sx-header-nav-left">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">
              <router-link :to="{ path: '/systemHomePage' }">系统首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
              <router-link :to="{ path: '/schoolProfile' }">校园简介</router-link>
          </el-menu-item>
          <el-menu-item index="3">
              <router-link :to="{ path: '/clubDetails' }">社团详情</router-link>
          </el-menu-item>
          <el-menu-item index="4">
              <router-link :to="{ path: '/activityDetails' }">活动详情</router-link>
          </el-menu-item>
          <el-menu-item index="5">
              <router-link :to="{ path: '/activePhotoWall' }">活动照片墙</router-link>
          </el-menu-item>
          <el-menu-item index="6">
              <router-link :to="{ path: '/personalCenter/handleCommunityApproval' }">个人中心</router-link>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="sx-header-nav-right">
        <div class="sx-header-nav-right-input">
          <input type="text" name="" id="">
        </div>
        <span class="sx-header-nav-right-search"><i class="iconfont icon-search-line"></i></span>
      </div>
    </div>
</template>
<script>
export default {
    name: 'indexNav',
    data() {
        return {
            activeIndex: '1',
        }
    },
    methods: {
        handleSelect(){}
    },
    created() {

    },
    mounted() {}
}
</script>

<style scoped lang="scss">
.sx-header-nav{
    box-sizing: border-box;
    padding: 0 40px;
    height: 60px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    .sx-header-nav-left{
        float: left;
        width: 672px;
        height: 60px;
        box-sizing: border-box; 
    }
    .sx-header-nav-right{
        position: relative;
        float: left;
        margin-left: 20px;
        width: 200px;
        height: 60px;
        margin-left: 40px;
        align-content: center;
        .sx-header-nav-right-input{
            position: absolute;
            bottom: 0;
            width: 180px;
            height: 40px;
            box-sizing: border-box;
            & input{
                display: inline-block;
                width: 180px;
                height: 40px;
                outline: none;
                border: none;
                box-sizing: border-box;
                border-bottom: 2px solid rgb(196, 196, 196);
                transition: all 2;
                &:hover{
                    border-bottom: 2px solid rgb(88, 88, 88);
                }
                &:focus
                { 
                    border-bottom: 2px solid rgb(88, 88, 88);
                }
            }
        }
        .sx-header-nav-right-search{
            position: absolute;
            bottom: 0;
            cursor: pointer;
            line-height: 60px;
            width: 40px;
            height: 40px;
            display: inline-block;
            margin-left: 180px;
            & i{
                font-size: 24px;
                font-weight: 550;
            }
        }
    }
}

a{
    text-decoration: none;
}
</style>

